<template>
  <div class="tourist-container">
    <!-- 标题与可预约总量 -->
    <div class="tourist-header">
      <h3 class="title">实时发布统计</h3>
      <div class="reserve-info">
        <span class="reserve-label">可发布总量</span>
        <span class="reserve-number">25987人</span>
      </div>
    </div>

    <!-- 数字展示条 -->
    <div class="number-bar">
      <div 
        class="number-block" 
        v-for="(num, idx) in ['2','5','9','8','7']" 
        :key="idx"
      >
        {{ num }}
      </div>
      <div class="unit-block">人</div>
    </div>

    <!-- 水球图区域 -->
    <div class="liquid-section">
      <div class="liquid-label">水球图</div>
      <div class="liquid-chart">
        <!-- 用伪元素模拟水球图效果，实际可用 ECharts 水球图（推荐） -->
        <div class="liquid-shape">
          <div class="liquid-percent">95%</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 若需要动态数据，可在此处通过 ref/reactive 定义并请求接口
</script>

<style scoped lang="scss">
.tourist-container {
  background: rgba(13, 2, 33, 0.7);
  border: 1px solid rgba(5, 217, 232, 0.3);
  border-radius: 2px;
  padding: 20px;
  color: #e0f7ff;

  // 标题区域
  .tourist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

    .title {
      font-size: 18px;
      font-weight: bold;
      color: #05d9e8; // 霓虹蓝标题
    }

    .reserve-info {
      display: flex;
      align-items: center;
      gap: 5px;

      .reserve-label {
        font-size: 14px;
        opacity: 0.8;
      }

      .reserve-number {
        font-size: 16px;
        color: #39ff14; // 霓虹绿数字
      }
    }
  }

  // 数字展示条
  .number-bar {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .number-block {
      width: 30px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: linear-gradient(90deg, #005f73, #05d9e8);
      border: 1px solid #05d9e8;
      margin-right: 5px;
      font-size: 16px;
      color: #fff;
    }

    .unit-block {
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      color: #e0f7ff;
    }
  }

  // 水球图区域
  .liquid-section {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .liquid-label {
      font-size: 14px;
      color: #05d9e8;
      opacity: 0.9;
    }

    .liquid-chart {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: radial-gradient(circle, #05d9e8 30%, #0d0221 80%);
      position: relative;
      overflow: hidden;

      .liquid-shape {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(0deg, #05d9e8 50%, transparent 50%);
        border-radius: 50%;

        .liquid-percent {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 20px;
          color: #fff;
          font-weight: bold;
        }
      }
    }
  }
}
</style>